<template>
	<!-- 笔记/评论 -->
	<view class="content base-con-bg">
		<nav-bar :leftText="titleKey[type]" leftType="3" bgColor="#fff"></nav-bar>
		<view v-if="type=='2'" class="search">
			<view class="iconfont"></view>
			<input class="uni-input" confirm-type="search" placeholder="请输入要搜索的内容" v-model="search" @blur="inputBlur" />
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in filterList" :key="index">
				<view class="iconfont icon-fanhui base-fanhui"></view>
				<view @click="itemClick(item,index)" class="title">{{index+1}}.{{item.stitle}}</view>
				<view class="notes-con">
					<text>{{ item.content }}</text>
				</view>
				<view class="bottom">
					<view v-if="type=='1' && item.ntype!=2" class="vote">
						<view class="v1">赞同({{item.agree || 0}})</view>
						<view>反对({{item.oppose || 0}})</view>
					</view>
					<view v-else></view>
					<view class="delete" @click="delItem(item,index)">
						<view class="iconfont icon-shanchu"></view>
						<view class="t">删除</view>
					</view>
				</view>
			</view>
		</view>
		<view class="base-no-data" v-if="list.length===0">
			<image class="icon" src="/static/image/no-data.png" mode="aspectFit"></image>
			<view class="msg">暂无数据~ </view>
		</view>
	</view>
</template>

<script>
	import {selectComments,deleteComment,getSubjectById} from "@/api/index.js"
	export default {
		data() {
			return {
				type: '1',
				titleKey: {
					'1': '我的评论',
					'2': '我的笔记',
				},
				page: 1,
				size: 5,
				list: [],
				filterList: [],
				loading: false,
				hasMore: true,
				search: '',
			}
		},
		computed: {
			getKeMuId() {
				return this.$store.getters.getKeMuId;
			},
			getKeMuParams() {
				return this.$store.getters.getKeMuParams;
			},
		},
		watch: {
			list:{
				handler(newVal){
					this.search='';
					this.filterList=[...this.list];
				},
				deep: true
			}
		},
		onLoad(options) {
			this.type=options.type;
			this.selectComments();
		},
		onReachBottom() {
		    if (this.loading || !this.hasMore) return;
		    console.log('滚动到底部了');
		    this.selectComments();
		},
		methods: {
			itemClick(item,index){
				getSubjectById({sid:item.sid}).then(res=>{
					this.$store.commit('subjectByDeptUpdata',res)
					this.$store.commit('set',['exReadonly',true]);
					if(item.ntype==2){//ai分析
						uni.navigateTo({
							url: `/pagesA/aiAccuracy/analyse?sid=${item.sid}`
						})
					}else{//做题
						uni.navigateTo({
							url: `/pagesB/exercise/index`
						})
					}
				})
			},
			simpleSearch(list=this.list, keyword=this.search, fields = ['content','stitle']) {
			    if (!keyword.trim()) return list;
			    
			    return list.filter(item => {
			        // 如果指定了字段，只在那些字段中搜索
			        if (fields.length > 0) {
			            return fields.some(field => {
			                const value = this.getNestedValue(item, field);
			                return value && value.toString().toLowerCase().includes(keyword.toLowerCase());
			            });
			        }
			        
			        // 如果没有指定字段，搜索所有字符串类型的值
			        return Object.values(item).some(value => {
			            return typeof value === 'string' && 
			                   value.toLowerCase().includes(keyword.toLowerCase());
			        });
			    });
			},
			getNestedValue(obj, path) {
			    return path.split('.').reduce((acc, part) => acc && acc[part], obj);
			},
			selectComments(){
				let params={
					page: this.page,
					size: this.size,
					type: this.type,
				};
				Object.assign(params,this.getKeMuParams);
				selectComments(params).then(res=>{
					const list=res?.data?.records;
					if (list.length > 0) {
						if(list.length==this.size){
							this.page++
						}else{
							this.hasMore = false;
						}
						this.list=this.list.concat(list);
					} else {
						this.hasMore = false;
					}
				}).finally(()=>{
					this.loading = false;
				})
			},
			delItem(item,index){
				uni.showModal({
					title: '提示',
					content: '是否确认删除！',
					success: (res)=>{
						if (res.confirm) {
							deleteComment({
								id: item.id
							}).then(res=>{
								this.list.splice(index,1);
								uni.showToast({
									title: `删除${this.type=='1' ? '评论' : '笔记'}成功`,
									icon: 'none'
								})
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			inputBlur(){
				if(this.$common.isEmpty(this.search)){
					this.filterList=[...this.list];
				}else{
					this.filterList=this.simpleSearch();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		min-height: 110vh;
		padding: 36rpx 28rpx 50rpx 28rpx;
	}
	.search{
		position: relative;
		margin-bottom: 20rpx;
		.iconfont{
			position: absolute;
			top: 50%;
			left: 26rpx;
			width: 30rpx;
			height: 30rpx;
			margin-top: -15rpx;
			background: url("/static/image/search-icon.png") no-repeat;
			background-size: 30rpx;
		}
		.uni-input{
			height: 74rpx;
			padding: 0 80rpx;
			background-color: #F8F8F8;
			border-radius: 34rpx;
		}
	}
	.list{
		.item{
			position: relative;
			padding: 30rpx 38rpx;
			margin-bottom: 24rpx;
			border: 2rpx solid #E9E9E9;
			border-radius: 26rpx;
		}
		.icon-fanhui{
			position: absolute;
			top: 34rpx;
			right: 30rpx;
			font-size: 26rpx;
			color: #A0A0A0
		}
		.title{
			margin-bottom: 26rpx;
			padding-right: 38rpx;
			font-size: 26rpx;
			font-weight: 600;
			color: #202020;
		}
		.notes-con{
			margin-bottom: 32rpx;
			color: #202020;
			font-size: 24rpx;
		}
		.bottom,.vote{
			display: flex;
			align-items: center;
		}
		.bottom{
			justify-content: space-between;
		}
		.vote{
			font-size: 20rpx;
			color: #999;
			.v1{
				margin-right: 48rpx;
			}
		}
		.delete{
			text-align: center;
			color: #515151;
			.t{
				font-size: 10rpx;
			}
		}
	}
</style>
